/**
 * 修改店主手机号码
 * @author: minzhang
 * @update: 2017-03-13
 */

import React, { PropTypes } from 'react';
import { Link } from 'dva/router';
import { Form, Input, Modal, Icon, message, Alert, Steps, Button, Row, Col } from 'antd';
import CommonCodeInput from '../Common/CommonCodeInput';
import CommonPhoneInput from '../Common/CommonPhoneInput';
import CommonCodeBtn from '../Common/CommonCodeBtn';
import styles from './StoreInfoModal.less';
import classnames from 'classnames';

const FormItem = Form.Item;
const Step = Steps.Step;

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 18,
  },
};

const StoreInfoModal = ({
  visible,
	btnLoading,	
	step,
	phone,
  onConfirm,
	onCancel,
	onBind,
	sendCode,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
		resetFields,
   },
}) => {
	
	function handleOk() {
    validateFields((errors) => {
      if (errors) {
        return;
      }
			
			const data = getFieldsValue();
			
      onConfirm(data, () => {
				resetFields();
			});
    });
  }
	
	function handleCancel() {
		resetFields();
		onCancel();
	}
	
	function handleBind() {
		resetFields();
		onBind();
	}
	
	function checkPhone(rule, value, callback) {
		if (value) {
			if(/^1[3|4|5|8|7][0-9]\d{8}$/.test(value.replace(/[^0-9]/g, ''))) { // 验证手机号格式
				callback();
			}else {
        callback(new Error("手机号格式不正确"));
			}
    } else {
      callback();
    }
	}
	
	const CodeBtn = () => 
		<CommonCodeBtn type="primary" size="large" onClick={sendCode}>发送验证码</CommonCodeBtn>
	
	const formCon = (
		<Form layout="horizontal" className={styles.form}>

			<FormItem
				label="手机号："
				{...formItemLayout}
			>
				{getFieldDecorator('phone', {
					initialValue: step === 0 ? phone : '',
					rules: [
//						{ required: true, message: '手机号未填写' },
//						{ validator: checkPhone },
					],
				})(
					<CommonPhoneInput placeholder="请输入手机号码" disabled={ step === 0 ? true : false } />
				)}
			</FormItem>

			<FormItem
				label="验证码："
				{...formItemLayout}
			>
				<Row gutter={8}>
					<Col span={12}>
						{getFieldDecorator('code', {
							rules: [
//								{ required: true, message: '验证码未填写' },
							],

						})(
							<CommonCodeInput len={6} placeholder="请输入验证码" size="large"/>
						)}
					</Col>
					<Col span={12}>
						<CodeBtn />
					</Col>
				</Row>
			</FormItem>

			<FormItem
				label=" "
				colon={false}
				{...formItemLayout}
			>
				<Button loading={btnLoading} onClick={handleOk} type="primary" size="large">下一步</Button>
			</FormItem>

		</Form>
	);
	
	const steps = [{
		title: '验证手机号码',
		description: '为了保证您的账号安全，请先验证您的安全手机号',
		content: formCon,
	}, {
		title: '修改手机号码',
		description: '输入新的手机号码，验证成功后即可修改',
		content: formCon,
	}, {
		title: '修改完成',
		description: '您已可以使用新的手机号',
		content: (<div className="tc"><Button type="primary" size="large" onClick={handleCancel}>完成</Button></div>),
	}];
	
	const modalOpts = {
    title: '修改手机号码',
    visible,
		width: 800,
		footer: null,
		maskClosable: false,
		confirmLoading: btnLoading,
		onCancel: handleCancel,
  };
	
  return (
		<Modal {...modalOpts}>
			<Alert message='如果您的手机号码已无法使用，请联系我们进行人工复核&nbsp;&nbsp;&nbsp;&nbsp;*QQ：544304958&nbsp;&nbsp;&nbsp;&nbsp;*电话：400-999-7315' type='info' showIcon />
			<Steps current={step} style={{padding: 30}}>
				{steps.map(item => <Step key={item.title} title={item.title} description={item.description} />)}
			</Steps>
			<div className="steps-content">
				{steps[step].content}
			</div>
		</Modal>
  );
};

StoreInfoModal.propTypes = {
	title: PropTypes.any,
  visible: PropTypes.any,
	btnLoading: PropTypes.any,								 
	step: PropTypes.any,								 
  onConfirm: PropTypes.func,
};

export default Form.create()(StoreInfoModal);